import React, { useEffect, useState } from 'react';
import { Modal, Form, Badge, Select, DatePicker } from "antd";
import moment from 'moment';
import { useSelector, useDispatch } from "react-redux";
import { setUpdateVisible } from '../../store/slice/orderSlice';
import { update } from '../../services/order';
const { Option } = Select;

export default function Update({ show }) {
    const dispatch = useDispatch();
    let { updateVisible, orderData } = useSelector((state => state.order));
    const [form] = Form.useForm();

    const handleOk = async () => {
        let { startTime, finishTime, status } = form.getFieldsValue();
        dispatch(setUpdateVisible(false));
        await update({
            id: orderData._id,
            startTime: startTime.format("YYYY-MM-DD HH:mm"),
            finishTime: finishTime.format("YYYY-MM-DD HH:mm"),
            status
        });
        form.setFieldsValue({
            startTime: "",
            finishTime: "",
            status: ""
        })
        show();
    }

    const handleCancel = () => {
        dispatch(setUpdateVisible(false));
    }

    useEffect(() => {
        if (orderData.finishTime) {
            form.setFieldsValue({
                startTime: moment(orderData.startTime, "YYYY-MM-DD HH:mm"),
                finishTime: moment(orderData.finishTime, "YYYY-MM-DD HH:mm"),
                status: orderData.status
            })
        } else {
            form.setFieldsValue({
                startTime: moment(orderData.startTime, "YYYY-MM-DD HH:mm"),
                status: orderData.status
            })
        }
    }, [orderData._id])

    return (
        <div>
            <Modal
                title="修改订单"
                visible={updateVisible}
                onOk={handleOk}
                onCancel={handleCancel}
            >
                <Form
                    name="addForm"
                    form={form}
                    labelCol={{
                        span: 4,
                    }}
                    wrapperCol={{
                        span: 20,
                    }}
                    autoComplete="off"
                >
                    <Form.Item
                        label="下单时间"
                        name="startTime"
                    >
                        <DatePicker showTime placeholder='下单时间'
                            format="YYYY-MM-DD HH:mm"
                            style={{ width: '100%' }} />
                    </Form.Item>
                    <Form.Item
                        label="完成时间"
                        name="finishTime"
                    >
                        <DatePicker showTime placeholder='完成时间'
                            format="YYYY-MM-DD HH:mm"
                            style={{ width: '100%' }} />
                    </Form.Item>
                    <Form.Item
                        label="订单状态"
                        name="status"
                    >
                        <Select
                            style={{
                                width: 120,
                            }}
                        >
                            <Option value={1}><Badge status="error" />待支付</Option>
                            <Option value={2}><Badge status="processing" />已支付</Option>
                            <Option value={3}><Badge status="processing" />正在运送</Option>
                            <Option value={4}><Badge status="success" />已完成</Option>
                            <Option value={5}><Badge status="default" />已取消</Option>
                        </Select>
                    </Form.Item>
                </Form>
            </Modal>
        </div >
    )
}
